<template>
  <div class="model-carousel">
    <div class="nav-body clearfix">
      <!-- 侧边导航占位 -->
      <div class="nav-side"></div>
      <div class="nav-content">
        <a-carousel autoplay>
          <div class="swiper-img" v-for="(item, index) in data" :key="index">
            <img
              :src="getFileAccessHttpUrl(item.imgUrl)"
              @click="linkTo(item.link)"
              class="hover-pointer"
            />
          </div>
        </a-carousel>
      </div>
      <div class="nav-right">
        <div class="person-msg">
          <div class="user-box" @click="entryControl({ path: '/' })">
            <img class="user-face"
                 :src="getFileAccessHttpUrl(userInfo.avatar) || getImgSrc('default')" alt />
            <div class="welcome">
              <div v-if="loginState" style="margin: 8px 0">您好，{{ userInfo.realname }}</div>
            </div>
          </div>
          <div class="gray-line"></div>
          <div class="icon-list flex flex-j-sb">
            <div class="icon-item" @click="entryControl(item)" :key="index"
                 v-for="(item, index) in entranceList">
              <img class="icon" :src="getImgSrc(item.icon)">
              <div>
                {{ item.label }}
              </div>
            </div>
          </div>
          <div class="icon-list flex flex-j-sb">
            <div class="icon-item" :key="index" @click="entryControl(item)"
                 v-for="(item, index) in appendList">
              <img class="icon" :src="getImgSrc(item.icon)">
              <div>
                {{ item.label }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useWebStore } from "@/store";
import { computed, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { getFileAccessHttpUrl } from "@/utils/compUtils";
import defaultImg from "@/assets/img/default.png";
import orderImg from "@/assets/img/order.png";
import cartsImg from "@/assets/img/carts.png";
import myCourseImg from "@/assets/img/myCourse.png";
import recentLearnImg from "@/assets/img/recentLearn.png";
import myCollectImg from "@/assets/img/myCollect.png";
import studyRecordImg from "@/assets/img/studyRecord.png";
import footprintImg from "@/assets/img/footprint.png";
import messageImg from "@/assets/img/message.png";
import certificateImg from "@/assets/img/certificate.png";

const router = useRouter();
const props = defineProps({
  data: {
    type: Array,
    default: []
  }
});
const webStore = useWebStore();
const loginState = computed(() => webStore.getLoginState);
const userInfo = ref<any>({});

const getImgSrc = (name) => {
  return {
    "order": orderImg,
    "carts": cartsImg,
    "myCourse": myCourseImg,
    "recentLearn": recentLearnImg,
    "myCollect": myCollectImg,
    "studyRecord": studyRecordImg,
    "footprint": footprintImg,
    "message": messageImg,
    "default": defaultImg,
    "certificate": certificateImg
  }[name];
};

const entranceList = reactive([
  {
    icon: "carts",
    label: "购物车",
    path: "/mall/cart"
  },
  {
    icon: "order",
    label: "我的订单",
    path: "/userCenter/myOrder"
  },
  {
    icon: "myCourse",
    label: "我的课程",
    path: "/course/courseList"
  },
  {
    icon: "recentLearn",
    label: "学习进度",
    path: "/userCenter/course/studyProcess"
  }

]);
const appendList = reactive([
  {
    icon: "studyRecord",
    label: "学习记录",
    path: "/userCenter/course/studyRecord"
  },
  {
    icon: "myCollect",
    label: "我的收藏",
    path: "/course/myCollect/2"
  },
  {
    icon: "footprint",
    label: "我的足迹",
    path: "/course/footprint/3"
  },
  {
    icon: "certificate",
    label: "我的证书",
    path: "/userCenter/certificate"
  }
]);

// 快捷跳转中心
function entryControl(val) {
  if (!val?.path) {
    return;
  }
  let url = router.resolve(val.path);
  window.open(url.href, "_blank");
}

watch(loginState, async (newValue, oldValue) => {
  if (!newValue) {
    userInfo.value = {};
  } else {
    userInfo.value = webStore.getUserInfo;
  }
}, { immediate: true, deep: true });

function linkTo(link) {
  if (!link) {
    return;
  }
  if (!link.includes("http")) {
    link = "http://" + link;
  }
  window.open(link, "_blank");
}
</script>

<style scoped lang="scss">
@import "@/assets/style/course/global.scss";

.label {
  font-size: 12px;
  font-weight: normal;
  line-height: 14px;
  text-align: center;
  letter-spacing: 0px;

  color: #666666;
}

.swiper-img {
  overflow: hidden;
  width: 647px;
  height: 360px;
}

.icon-list {
  width: 216px
}

.icon-list:nth-last-of-type(1) {
  margin-top: 20px;
}

.hot-box {
  margin-top: 35px;
  width: 216px;
}

.hot-tag {
  margin-right: 6px;
  width: 36px;
  height: 18px;
  border-radius: 4px;
  opacity: 1;
  font-size: 12px;
  border: 1px solid #F31947;
  color: #F31947;
  text-align: center;
  line-height: 18px;
}

.gray-line {
  width: 216px;
  height: 1px;
  border: 1px solid #E5E5E5;
  margin: 25px 0;
}

.icon {
  width: 20px !important;
  height: 20px !important;
  margin-bottom: 7px;
}

.icon-item {
  cursor: pointer;
  text-align: center;

  > div {
    font-size: 12px;
    font-weight: normal;
    line-height: 22px;
    text-align: center;
    width: 55px;
    color: #666666;
  }

  > .value {
    font-size: 14px;

    line-height: 17px;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0px;
    margin-bottom: 3px;
    color: #F31947;
  }

  > .label {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    letter-spacing: 0px;
    color: #666666;
    margin-bottom: 13px;
  }
}

.model-carousel {
  width: 1200px;
  height: 360px;
  overflow: hidden;
}

.hover-pointer {
  width: 647px;
  height: 360px;
  object-fit: cover;
  border-radius: 10px;
}

.welcome {
  font-size: 14px;
  font-weight: normal;
  line-height: 17px;
  text-align: center;
  color: #333333;
  margin: 8px 0;
}

.hr {
  width: 216px;
  height: 1px;
  border: 1px solid #E5E5E5;
}

.btns {
  margin-top: 21px;
  margin-bottom: 13px;
  width: 77px;
  height: 28px;
  border-radius: 14px;
  opacity: 1;
  font-size: 13px;
  font-weight: normal;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0px;

  color: #FFFFFF;
  background: #F31947;
}

.sign-up {
  background: #F39519;
  margin-left: 10px;
}

.avatar {
  margin-bottom: 13px;
}

.user-face {
  margin-bottom: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

/* 导航主体 */
.nav-body {
  width: 1200px;
  height: 360px;
  margin: 0 auto;
}

.nav-side {
  height: 360px;
  width: 263.2px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  float: left;
  padding: 0px;
  color: #fff;
}


/*导航内容*/
.nav-content {
  width: 647px;
  margin-left: 10.8px;
  height: 360px;
  float: left;
  position: relative;
}

.nav-right {
  float: left;
  width: 253.2px;
  margin-left: 10px;
  border-radius: 10px;
  background: #FFFFFF;

  .person-msg {
    cursor: pointer;
    height: 360px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 28px;
    padding-bottom: 25px;

    > .user-box {
      text-align: center;
    }
  }

  .shop-msg {
    div {
      width: 100%;
      margin: 10px 27px;

      span {
        cursor: pointer;
        text-align: center;
        font-weight: bold;
        margin-left: 5px;
      }

      span:nth-child(1) {
        margin-left: 0;
      }

      span:nth-child(2) {
        font-weight: normal;
      }

      span:nth-child(3):hover {
        color: #F31947;
      }
    }

    ul {
      li {
        cursor: pointer;
        margin: 5px 0;
        color: #999395;
        width: 150px;
        font-size: 12px;

        &:hover {
          color: #F31947;
        }
      }
    }
  }
}
</style>
